<template>
	<view class="uni-im-load-state">
		<uni-icons v-if="status == 'loading'" color="#bbb" :size="24" class="refresh-icon"
			type="spinner-cycle"></uni-icons>
		<text class="refresh-text">{{status == 'loading'?contentText.contentrefresh:contentText.contentnomore}}</text>
	</view>
</template>

<script>
	// import i18nMixin from '../../i18n/i18n-mixin.js'
	import messages from '../../i18n/index.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	const {
		t:$w
	} = initVueI18n(messages)
	export default {
		// mixins: [i18nMixin],
		props: {
			status: {
				type: String,
				default: "loading"
			},
			contentText: {
				type: Object,
				default () {
					return {
						"contentrefresh": $w("加载中") + "...",
						"contentnomore": "- " + $w("没有相关数据") + " -"
					}
				}
			}
		},
		// 此处改动较大 __WJF
		computed:{
			contentrefresh(){
				return this.$w("加载中") + "..."
			},
			contentnomore(){
				return "- " + this.$w("没有相关数据") + " -"
			}
		}
	}
</script>

<style lang="scss">
	.uni-im-load-state {
		height: 50px;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		width: 750rpx;

		/* #ifdef H5 */
		@media screen and (min-device-width:960px) {
			width: 100%;
		}

		/* #endif */

		// 给refresh-icon增加旋转的动画
		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.refresh-icon {
			animation: rotate 1.3s linear infinite;
			margin: 5px;
		}

		.refresh-text {
			color: #bbb;
			font-size: 14px;
		}
	}
</style>